<template>
	<view>
		<view class="head-box" :style="'height:'+headHeight+'rpx;'">
			<view class="inherent">
				<view class="wlIcon-fanhui1 goback" @click="goBack"></view>
				<view class="search">
					<view class="wlIcon-sousuo1"></view>
					<input type="text" v-model="search_text" confirm-type="search" placeholder="请输入搜索药品"
						@confirm="search" placeholder-class="mo" />
				</view>
			</view>
		</view>
		<view class="box">
			<view class="left-con">
				<scroll-view scroll-y="true">
					<view :class="num==item.xin_id?'list bgcolor':'list'" v-for="(item,index) in arr"
						@click="tab(item.xin_id)">
						<view class="line" v-if="num==item.xin_id"></view>
						<view class="title">{{item.xin_name}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="right-con">
				<scroll-view scroll-y="true">
					<view class="more" v-for="(item,index) in list">
						<image :src="$wanlshop.oss(item.goods_image, 255, 255)" mode="aspectFill"></image>
						<view class="detail">
							<view class="conment">
								<view class="head">{{item.goods_name}}</view>
								<view class="name">{{item.manufacturer}}</view>
							</view>
							<view class="foot">
								<view class="reservation" @click="purchasingForm(item)">预约</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: ['全部', '肿瘤类', '心脑血管', '血液系统', '肝肾', '胃肠道', '神经系统', '免疫系统', '皮肤', '其他'],
				num: 0,
				headHeight: '',
				list: [],
				search_text: ''
			}
		},
		onLoad() {
			this.getXinCateGory()
			this.getXinGoods()
		},
		created() {
			this.headHeight = (uni.getSystemInfoSync().statusBarHeight + 45) * 2
		},
		methods: {
			async getXinCateGory() {
				await uni.request({
					url: '/wanlshop/product/getXinCateGory',
					method: 'GET',
					success: res => {
						if (Array.isArray(res.data)) {
							this.arr = [{
								xin_id: 0,
								xin_name: '全部'
							}, ...res.data];
						} else {
							this.arr = [{
								xin_id: 0,
								xin_name: '全部'
							}];
						}
					}
				});
			},
			async getXinGoods() {
				await uni.request({
					url: '/wanlshop/product/getXinGoods',
					data: {
						"xin_id": this.num
					},
					method: 'GET',
					success: res => {
						this.list = res.data
					}
				});
			},
			tab(index) {
				this.num = index
				this.getXinGoods()
			},
			search() {
				// 确保 search_text 存在，并对特殊字符进行编码，防止 URL 出错
				// let query = encodeURIComponent(this.search_text || '');
				uni.navigateTo({
					url: `/pages/new/searchResult/searchResult?search_text=${this.search_text}`
				});
			},
			purchasingForm(item) {
				let itemStr = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/new/purchasingForm/purchasingForm?xinte_goods=${itemStr}`
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.box {
		width: 750rpx;
		height: 100vh;
		display: flex;

		.left-con {
			background-color: #F6F6F6;
			width: 230rpx;
			height: 100%;

			scroll-view {
				width: 100%;
				height: 100%;
			}

			.list {
				width: 100%;
				height: 102rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.line {
					width: 10rpx;
					height: 26rpx;
					border-radius: 2rpx 5rpx 2rpx 2rpx;
					background: linear-gradient(180deg, #84BD00 0%, rgba(87, 144, 248, 0.7) 98%);
					position: absolute;
					left: 12rpx;
				}

				.title {
					font-size: 30rpx;
					color: #3D3D3D;
				}
			}

			.bgcolor {
				background-color: #fff;
			}
		}

		.right-con {
			width: 520rpx;
			height: 100vh;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			background-color: #fff;

			scroll-view {
				width: 100%;
				height: 100%;
			}

			.more {
				width: 460rpx;
				display: flex;
				margin-left: 30rpx;
				margin-top: 40rpx;

				image {
					width: 182rpx;
					height: 182rpx;
					border-radius: 16rpx;
				}

				.detail {
					width: 258rpx;
					height: 182rpx;
					margin-left: 20rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;

					.conment {
						width: 100%;

						.head {
							width: 100%;
							font-size: 26rpx;
							color: #333333;
						}

						.name {
							width: 100%;
							font-size: 24rpx;
							color: #999999;
							margin-top: 10rpx;
						}
					}

					.foot {
						width: 100%;
						display: flex;
						justify-content: flex-end;

						.reservation {
							width: 110rpx;
							height: 52rpx;
							border-radius: 50rpx;
							opacity: 1;
							background: #84BD00;
							color: #fff;
							font-size: 24rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}
	}

	.head-box {
		width: 750rpx;
		display: flex;
		align-items: center;
		position: relative;

		.inherent {
			width: 750rpx;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			display: flex;
			align-items: center;
		}

		.goback {
			font-size: 34rpx;
			margin-left: 30rpx;
		}

		.search {
			width: 440rpx;
			height: 70rpx;
			background: rgba(255, 255, 255, 0.71);
			border-radius: 50rpx;
			margin-left: 24rpx;
			display: flex;
			align-items: center;

			view {
				font-size: 36rpx;
				color: #438AF3;
				margin-left: 38rpx;
			}

			input {
				margin-left: 28rpx;
				font-size: 26rpx;
			}

			.mo {
				color: #999999;
			}
		}
	}
</style>